<!--
 * @Author: panda
 * @Date: 2022-05-18 09:35
 * @Description: 视频卡片
-->
<template>
  <router-link
    target="_blank"
    :to="{ path: '/video/content', query: { id: id } }"
  >
    <el-card
      :body-style="{ padding: '10px' }"
      shadow="hover"
      @click="toDetail(id)"
    >
      <img :src="cover" class="image" alt="photo" fit="cover" />
      <div class="title">
        {{ title }}
      </div>
      <div class="bottom">
        <span>{{ username }}</span>
        <span>{{ createTime.substr(0, 10) }}</span>
      </div>
    </el-card>
  </router-link>
</template>

<script lang="ts">
import { defineComponent, toRefs } from "vue";
import { useRouter } from "vue-router";

// import { getVideoCardInfo } from "../api/video";
// import {types} from "sass";
// import String = types.String;

export default defineComponent({
  // 取出NormalMododule传过来的数据
  props: {
    // categoryId: String,
    id: String,
    cover: String,
    title: String,
    username: String,
    createTime: String,
    // info: Object,
  },
  setup(props) {
    const router = useRouter();
    const toDetail = (id: number) => {
      const routeData = router.resolve({
        path: "/video/" + id,
      });
      window.open(routeData.href, "_blank");
    };
    return {
      ...toRefs(props),
      toDetail,
    };
  },
});
</script>

<style scoped>
.el-card {
  /* height: 220px;
  width: 213px; */
}

a {
  text-decoration: none;
}
.el-card {
  border: none;
}
.image {
  width: 100%;
  height: 100%;
}

.time {
  font-size: 13px;
  color: #999;
}

.bottom {
  margin-top: 13px;
  /* line-height: 12px; */
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* 溢出标题省略号表示 */
.title {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  font-size: 14px;
}

.button {
  padding: 0;
  min-height: auto;
}

.image {
  width: 200px;
  height: 130px;
  /* display: block; */
}
</style>
